<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@page session="true"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/jquery.mobile-1.4.2.css">
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/resources/css/app.css?v=0.2.11">
<%-- 		<script
	src="${pageContext.request.contextPath}/resources/js/views/form_programar_visita.js"></script> --%>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery-1.11.0.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.mobile-1.4.2.min.js"></script>

<script
	src="${pageContext.request.contextPath}/resources/js/jquery.validate.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/js/jquery.validate.js"></script>

<script
	src="${pageContext.request.contextPath}/resources/js/additional-methods.min.js"></script>

<script
	src="${pageContext.request.contextPath}/resources/js/validations.js?v=0.2.11"></script>
<script type="text/javascript">
function doSearch(url, numeroPropiedad, index) {
	if ($(numeroPropiedad).valid()) {
		$.post(url, {
			'numeroPropiedad' : $(numeroPropiedad).val()
		}, function(data) {
			showPropertyData(index, data);
		});
	} else {
		clear();
	}
}
function showPropertyData(index, data) {
	if (data.number) {
		if (index != 2) {

			$("#tp-" + index).show();
			$("#tp-" + index + " .direccion").html(data.address);
			$("#tp-" + index + " .comuna").html(data.comuna);
			$("#tp-" + index + " .venta").html(
					data.rentOrSale ? 'Venta' : 'Arriendo');
			$("#tp-" + index + " .typeName").html(data.typeName);
			$("#tp-" + index + " .statusName").html(data.statusName);
		}
	} else {
		$("#tp-" + index).show();
	}
	$("#p-" + index).show();
}
$(function() {
	$("#f")
			.validate(
					{
						rules : {
							"numeroPropiedad" : {
								required : true,
								digits : true,
								numeroExiste : "${pageContext.request.contextPath}/search_propiedadInexistente"
							}
						},
						messages : {
							"numeroPropiedad" : {
								required : "El número es requerido",
								digits : "Valor inválido",
								numeroExiste : "El número de la propiedad no esta registrado"
							}
						},
					});
});
</script>


<style>
.error {
	font-family: calibri;
	font-size: 18px;
	color: red;
	font-size: 18px;
}
</style>
<title>Agendar Visita</title>
</head>
<body>
<body>
	<div data-role="page" data-ajax="false" data-theme="a">
		<div data-role="header">
			<h1>Agendar Visita</h1>
			<a data-iconpos="notext" data-icon="home"
				href="${pageContext.request.contextPath}"></a>
		</div>
		<form action="programar_visita" method="POST" id="f" data-ajax="false">
			<div role="main" class="ui.content">
				<div class="centered-content">

					<table class="outputTable">
						<tr>
							<td>Número de la propiedad</td>
							<td><input id="numeroPropiedad" name="numeroPropiedad"
								onblur="doSearch('${pageContext.request.contextPath}/search_property_data',this,1)" /></td>
						</tr>
						<tr style="display: none" id="p-1">
							<td colspan="2">
								<table class="outputTable" id="tp-1" style="display: none">

									<tr>
										<td>Dirección :</td>
										<td class="direccion"></td>
									</tr>
									<tr>
										<td>Comuna :</td>
										<td class="comuna"></td>
									</tr>
									<tr>
										<td>Venta o Arriendo :</td>
										<td class="venta"></td>
									</tr>
									<tr>
										<td>Tipo de propiedad :</td>
										<td class="typeName"></td>
									</tr>
									<tr>
										<td>Estado :</td>
										<td class="statusName"></td>
									</tr>
								</table>

							</td>
						</tr>
						<tr>
							<td><a href="${pageContext.request.contextPath}/"
								class="ui-btn ui-icon-delete ui-btn-icon-right ui-btn-b"
								data-ajax="false">Cancelar</a></td>
							<td><button type="submit"
									class="ui-btn ui-icon-check ui-btn-icon-right">Continuar</button></td>
						</tr>
					</table>
				</div>
			</div>
		</form>
	</div>

</body>
</html>